<template>
	<uv-upload class="margin-top-sm" :fileList="fileList1" name="1" multiple :width="width" :height="height"
		:maxCount=maxCount uploadIcon="plus" uploadIconColor="#006BFE" :uploadText="uploadText" @afterRead="afterRead"
		@delete="deletePic" :previewFullImage="true">
		<slot name="img"></slot>
	</uv-upload>
</template>

<script>
	export default {
		props: {
			value: [String, Object, Array],
			uploadText: [String, Object, Array],
			maxCount: [Number, Object, Array],
			height: {
				type: Number,
				default: 88
			},
			width: {
				type: Number,
				default: 150
			}
		},
		data() {
			return {
				fileList1: [],
				uploadList: [],
				headers: {
					Authorization: "Bearer " + uni.getStorageSync('token'),
				},
			}
		},
		watch: {
			value: {
				handler(val) {
					if (val) {
						// 首先将值转为数组
						const list = Array.isArray(val) ? val : this.value.split(",");
						this.fileList1 = [];
						this.uploadList = [];
						for (let item of list) {
							if (!item) continue; //空图片不显示
							if (typeof item === "string") {
								item = {
									name: item,
									url: `${this.$hd.baseUrl}/common/file/${item}`,
									id: item
								};
							} else if (typeof item === "object") {
								item.url = this.$hd.baseUrl + this.uploadBasePrefix + item.uploadPath + "/" + item.name
							}
							this.fileList1.push(item);
							this.uploadList.push(item);
						}
					} else {
						this.fileList1 = [];
						this.uploadList = [];
						return [];
					}
				},
				deep: true,
				immediate: true,
			},
		},
		methods: {
			// 删除图片
			deletePic(event) {
				// this[`fileList${event.name}`].splice(event.index, 1)
				this.fileList1.splice(event.index, 1)
				this.uploadList.splice(event.index, 1)
				this.$emit("deletePic", event);
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					this.$emit('uploadEm', lists[i].url)
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
					this.uploadList.push(result.data)
				}
				const pathArr = this.uploadList.map(item => (item.id))
				this.$emit("input", pathArr.join(','));
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: this.$hd.baseUrl + '/common/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							// user: 'test'
						},
						header: {
							Authorization: "Bearer " + uni.getStorageSync('token'),
						},
						success: (res) => {
							resolve(JSON.parse(res.data))
						}
					});
				})
			}
		},
	}
</script>

<style>
</style>